package myJs.components

import cats.effect.SyncIO
import japgolly.scalajs.react.ScalaComponent
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.vdom.all._
import monocle.macros.Lenses
import myJs.tool.Tool
import myJs.tool.Tool._

import scala.collection.SeqMap

/** Created by yz on 3/11/2020
  */

object TagComponent {

  @Lenses
  case class State(tags: String)

  object State {
    def init = {
      State(tags = "other")
    }
  }

  class Backend(bs: BackendScope[Unit, State]) {

    def didMount = {
      SyncIO {
        Tool.popover
        ()
      }
    }

    def render(s: State) = {
      Tool.tagMap.map { case (v, showText) =>
        val isChecked = s.tags == v
        val checkedClass = if (isChecked) {
          "checked"
        } else ""
        span(
          input(`type` := "checkbox", checked := isChecked, name := "tags", value := v, display := "none"),
          a(href := "javascript:;", `class` := checkedClass, onClick --> myOnClick(v), showText)
        )
      }.toReactFragment
    }

    def myOnClick(v: String) = {
      bs.modState { state =>
        state.copy(tags = v)
      }
    }
  }

  val Component = ScalaComponent
    .builder[Unit]
    .initialState(State.init)
    .renderBackend[Backend]
    .componentDidMount(x => x.backend.didMount)
    .build

}
